<script setup lang="ts">

import { onMounted, ref} from 'vue'
import { NButton, NDataTable, useMessage } from 'naive-ui'
import { getfragmentList } from '@/api/knowledge'
import to from "await-to-js";
import { useRouter } from 'vue-router'
import { t } from '@/locales';

const router = useRouter()

const docId = ref<string>('');

onMounted(() => { 
    docId.value = router.currentRoute.value.query.docId as string
    fetchData() 
});

const message = useMessage()

const goBack = () => {
  router.go(-1);
};


const pagination = ref({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 30, 40],
  onChange: (page: number) => {
    pagination.value.page = page;
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.value.pageSize = pageSize;
    pagination.value.page = 1;
  }
});



const createColumns = () => {
    return [
        ...(false
            ? [{
                title: 'ID',
                key: 'id',
                width: 80,
                ellipsis: true,
            }]
            : []),
        {
            title: t('knowledge.no'),
            key: 'fid'
        },

        {
            title: t('knowledge.content'),
            key: 'content',
            width: 800,
            ellipsis: {
                tooltip: {
                    contentStyle: 'max-width:300px'
                }
            }
        },
    ]
}

const tableData = ref([]);
const fetchData = async () => {
    try {
        // 发起一个请求
        const [err, result] = await to(getfragmentList(docId.value));
        console.log("fragmenresult===", result)
        if (err) {
            message.error(err.message)
        } else {
            tableData.value = result.rows;
        }
    } catch (error) {
        console.error('Error fetching data:', error);
    }
};


const columns = ref(createColumns());

</script>
<template>
  

    <div class="flex h-full table-box" style="border-bottom-left-radius: 20px;"> 
    <main class="flex-1 overflow-hidden h-full annex-main">
      <div style="display: flex; justify-content: flex-start; margin:10px;border-top-left-radius: 20px;" class="know-header">
        <n-button @click="goBack" type="primary" :bordered="false" class="success-button">
            {{ $t('knowledge.return') }}
        </n-button>
      </div> 

      <n-data-table 
        :columns="columns"
        :data="tableData"
        :pagination="pagination"
      />
    </main>
  </div>

</template>
